<template>
    <div class="loginMain fill flex justify-center align-center flex-direction">
        <Menus :webconfig="webinfo.webinfo" :data="webinfo.menusnav"></Menus>
        <div class="loginBox">
            <div class="fill flex justify-center align-center">
                <div class="formBox flex justify-center align-center flex-direction">
                    <div class="formItemBox flex justify-start align-center">
                        <vs-input state="success" success v-model="email" label="登录邮箱" placeholder="请输入邮箱" autocomplete="off">
                            <template #icon>
                                <i class='bx bx-mail-send' ></i>
                            </template>
                            <template v-if="!checkEmail && email !== ''" #message-danger>
                                请输入正确的邮箱
                            </template>
                        </vs-input>
                    </div>
                    <div class="formItemBox flex justify-start align-center">
                        <vs-input @keyup.enter.native="appLogin" state="danger" danger label="登录密码" type="password" v-model="password" placeholder="请输入密码" autocomplete="off">
                            <template #icon>
                                <i class='bx bx-lock'></i>
                            </template>
                            <template v-if="password == ''" #message-danger>
                                请输入密码
                            </template>
                        </vs-input>
                    </div>
                    <div class="formItemBox flex justify-start align-center">
                        <div class="gss flex justify-center align-center">C</div>
                        <vs-input @keyup.enter.native="appLogin" @click-icon="getCheckCodeHandler" state="warn" :label="`验证码（${seconds>0?seconds+'秒后可重新获取':'0'}）`" success v-model="checkcode" placeholder="请输入验证码" autocomplete="off" width="300" style="flex:1 1 auto;" icon-after>
                            <template #icon>
                                <i class='bx bx-code-block' ></i>
                            </template>
                            <template v-if="checkcode == ''" #message-danger>
                                请输入验证码
                            </template>
                        </vs-input>
                    </div>
                    <div class="formItemBox flex justify-start align-center">
                        <vs-button @click="appLogin" flat color="warn">
                            <i class='bx bx-navigation'></i>
                            <span style="font-size: 12px;padding-left: 5px;">立即登录</span>
                        </vs-button>
                        <nuxt-link to="/register">
                            <vs-button size="mini">
                                还没有账号
                            </vs-button>
                        </nuxt-link>
                    </div>
                </div>
            </div>
        </div>
        <Copy :webconfig="webinfo.webinfo" :frendlyData="webinfo.friends" :menuDatas="webinfo.menus" :bussinessData="webinfo.bussiness" :questionsData="webinfo.questions.data"></Copy>
    </div>
</template>
<script>
    import { extendsMenus,extendsParams,extendsEncrypte } from '~/assets/inc/common.js';
    import { apis } from '~/assets/inc/apis.js';
    let timer = null;
    export default{
        data() {
            return { 
                webinfo: 'default',
                email:'',
                password:'',
                repassword:'',
                checkcode:'',
                seconds:0,
            }
        },
        async asyncData(context) {
            extendsEncrypte({},context.$axios);
            let res = await context.$axios.get(apis.indexApi,extendsParams({}));
            res.data.message.menusnav = extendsMenus([...res.data.message.menus]);
            return { webinfo: res.data.message }
        },
        head(){
            return {
                title: this.webinfo.webinfo.title,
                meta: [
                    { charset: 'utf-8' },
                    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
                    { name: 'keywords', content:  this.webinfo.webinfo.web_keywords},
                    { hid: 'description',name: 'description',content: this.webinfo.webinfo.web_descriptons}
                ]
            }
        },
        computed: {
            checkEmail() {
                return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)
            }
        },
        mounted(){
            localStorage.clear();
            this.$store.commit('setUserInfos',{});
            this.$store.commit('setLoading',false);
        },
        beforeDestroy(){
            this.$store.commit('setLoading',true);
        },
        methods:{
            async appLogin(){
                const { email,password,checkcode } = this;
                if(!email){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入登录邮箱'
                    })
                    return;
                }
                if(!password){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入登录密码'
                    })
                    return;
                }
                if(!checkcode){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: '请输入验证码'
                    })
                    return;
                }
                this.$store.commit('setLoading',true);
                extendsEncrypte({ email,password,checkcode },this.$axios);
                const res = await this.$axios.post(apis.userLoginAPI,extendsParams({ email,password,checkcode }));
                this.$vs.notification({
                    progress: 'auto',
                    color:res.data.code==200?'success':'danger',
                    position:'bottom-center',
                    title: 'Web Message!',
                    text: res.data.code==200?res.data.message.message:res.data.message
                })
                if(res.data.code==200){
                    localStorage.setItem('access',res.data.message.token);
                    localStorage.setItem('userinfo',JSON.stringify(res.data.message.userinfo));
                    this.$store.commit('setUserInfos',res.data.message.userinfo);
                    this.$router.replace('/');
                }
                this.$store.commit('setLoading',false);
            },
            //获取邮箱验证码
            async getCheckCodeHandler(){
                this.checkcode = '';
                if(this.seconds>0){
                    this.$vs.notification({
                        progress: 'auto',
                        color:'danger',
                        position:'bottom-center',
                        title: 'Web Message!',
                        text: `${this.seconds}秒后才能重新获取`
                    })
                    return;
                }
                this.$store.commit('setLoading',true);
                extendsEncrypte({ email:this.email },this.$axios);
                const res = await this.$axios.post(apis.getOtherCheckcodeAPI,extendsParams({ email:this.email }));
                this.$vs.notification({
                    progress: 'auto',
                    color:res.data.code==200?'success':'danger',
                    position:'bottom-center',
                    title: 'Web Message!',
                    text: res.data.message
                })
                if(res.data.code==200){
                    this.seconds = 60;
                    timer = setInterval(() => {
                        this.seconds -= 1;
                        if(this.seconds<=0){
                            this.seconds = 0;
                            clearInterval(timer);
                        }
                    }, 1000);
                }
                this.$store.commit('setLoading',false);
            },
        }
    }
</script>
<style lang="scss" scoped>
.loginMain{
    .loginBox{
        width:1200px;
        height:50vh;
        // background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
        border-radius: 30px;
        margin: 200px 0 50px 0;
        padding:30px;
        .loginLogo{
            width:100%;
            height:120px;
            img{
                width: auto;
                height: 200px;
            }
            h2{
                letter-spacing: 2px;
                padding:0 0 5px 10px;
            }
        }
        .formBox{
            width:100%;
            .formItemBox{
                width:400px;
                padding:20px 0;
            }
        }
    }
}
@media screen and (min-width:0px) and (max-width:1280px) {
    .loginMain{
        .loginBox{
            width:100%;
            height:auto;            backdrop-filter: blur(10px);
            border-radius: 30px;
            margin: 7rem 0 1rem 0;
            padding:3rem;
            .loginLogo{
                width:100%;
                height:12rem;
                img{
                    width: auto;
                    height: 20rem;
                }
                h2{
                    letter-spacing: 0.2rem;
                    padding:0 0 0.5rem 1rem;
                }
            }
            .formBox{
                width:100%;
                .formItemBox{
                    width:100%;
                    padding:2rem 0;
                }
            }
        }
    }
}
</style>